<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<title>列表</title>

	<!-- angularjs -->
    <script type="text/javascript" src="/static/plugins/angular/1.5.0/angular.min.js"></script>
    
	<!-- jQuery  -->
    <script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- bootstrap5 -->
	<link href="/static/plugins/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" media="all" />
	<script src="/static/plugins/bootstrap/5.1.3/js/bootstrap.min.js" charset="utf-8"></script>
	
	<!-- angular-file-upload -->
	<script type="text/javascript" src="/static/plugins/angular/extends/angular-file-upload/angular-file-upload.min.js"></script>
	
	<!-- iconfont  -->
	<link rel="stylesheet" type="text/css" href="/static/plugins/h-ui/iconfont/1.0.8/iconfont.css" />
	<!-- alibaba iconfont -->
	<link rel="stylesheet" href="/static/css/icon/iconfont.css" media="all" />
	
	<!-- office表格处理  -->
	<script type="text/javascript" src="/static/plugins/xlsxFull/xlsx.full.min.js"></script>
	
	<!-- layui  -->
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>

	<style>
	table {border-collapse: collapse;}
	.sticky-table {
		overflow: auto;
		width: 100%;
	}
	
	.sticky-table td, .sticky-table th {
	    /* 设置td,th宽度高度 */
	    border: 1px solid #c7d8ee;
	    min-width: 50px;
	    height: 30px;
	    /*边框线，不会随着滑动变化而滑动 start*/
	    outline-color: #c7d8ee;
	    outline-style: solid;
	    outline-width: 1px;
	    /*边框线，不会随着滑动变化而滑动 start*/
	}
	.sticky-table th {
	    position: sticky;
	    top: 0; /* 首行永远固定在头部  */
	    background-color: #eaf4ff; /*设置表头背景色*/
	}
	</style>
	
	<style>
	
	<style>
	.file-multy {
		position: relative;
		border-radius: 4px;
		padding: 0;
		overflow: hidden;
		color: #1E88C7;
		text-decoration: none;
		text-indent: 0;
		line-height: 20px;
	}
	
	.file-multy input {
		cursor: pointer;
		position: absolute;
		font-size: 100px;
		left: 12;
		top: 10;
		opacity: 0;
		width: 88px;
		height: 31px;
	}
	
	.file-multy:hover {
		background: #AADFFD;
		border-color: #78C3F3;
		color: #004974;
		text-decoration: none;
	}
	</style>
	<script th:inline="javascript">
	var dto = [[${dto}]];
	</script>
</head>
<body style="padding: 10px 0px;">
<div class="container" style="max-width: 100% !important;" ng-app="myApp" ng-controller="mainCtrl">
	<div style="display: flex;">
		<div class="file-multy" style="width: 90px;">
			<input id="file" type="file" nv-file-select uploader="uploaderForImport" options="{ ysfield: 'aaa' }" />
			<button type="button" class="btn btn-outline-success btn-sm"><i class="iconfont icon-file-fill" style="font-size: 14px;"></i>选择文件</button>
		</div>
		<div class="file-multy" style="width: 90px;">
			<button type="button" class="btn btn-outline-danger btn-sm" ng-click="doExportTemplate()"><i class="iconfont icon-export" style="font-size: 14px;"></i>导出模板</button>
		</div>
		<div class="file-multy" style="width: 90px;">
			<button type="button" class="btn btn-outline-info btn-sm" ng-click="doImport()"><i class="iconfont icon-save1" style="font-size: 14px;"></i>确定导入</button>
		</div>
	</div>
	
	<div class="table-responsive-sm table-responsive-md table-responsive-lg table-responsive-xl sticky-table" style="overflow: auto; max-height: 90vh; height: 90vh;">
		
		<table id="mytable" class="table table-border table-bordered table-sm table-hover table-sort table-responsive table-nowrap" style="font-size: 12px; white-space: nowrap;">
			<thead>
				<tr class="table-primary" style="text-align: center;">
					<th ng-repeat="field in fieldArr">{{field.name}}</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="row in rows">
					<td ng-repeat="field in fieldArr">{{row[field.code]}}</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div>
		<ul class="pagination pagination-sm justify-content-end" style="margin-top: 2px;">
			<li class="page-item"><span class="page-link" href="#" style="border: none;">共有数据：{{rows.length}}条</span></li>
		</ul>
	</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['angularFileUpload']);
app.controller('mainCtrl', ['$scope', '$http', 'FileUploader', MainController]);
function MainController($scope, $http, FileUploader){
	$scope.fieldArr = dto.fieldArr;
	$scope.nameValMap = dto.nameValMap;
	$scope.menuId = dto.menuId;
	$scope.fileName = dto.fileName;
	$scope.rows = [];
	$scope.URL_UPLOAD = '/api/outer/upload/uploadForAngularFileUpload'; // 文件上传路径
	
	// 初始化上传按钮
    var uploader = $scope.uploaderForImport = new FileUploader({
    	url: $scope.URL_UPLOAD,
    	autoUpload: true,
        onAfterAddingFile: function(item) {
    		console.log(item);
    		$scope.readExcelList(item._file, $scope.nameValMap);
        },
        onAfterAddingAll: function(item) {
    		console.log('onAfterAddingAll', item);
        },
        onBeforeUploadItem: function(item) {
    		console.log(item);
        },
        onSuccessItem: function(fileItem, response, status, headers) {
    		console.log(fileItem, response, status, headers);
        },
        onCompleteAll: function() {
    		console.log('onCompleteAll');
    		//layer.closeAll();
        }
    });
	
    $scope.readExcelList = function(obj, nameValMap) {
    	
    	var wb;//读取完成的数据
    	var rABS = false; //是否将文件读取为二进制字符串
    	var iid;
    	const IMPORTFILE_MAXSIZE = 1*2048;       //这里可以自定义控制导入文件大小
    	var suffix = obj.name.split(".").slice(-1);
    	if(suffix != 'xls' && suffix !='xlsx'){
    		layer.msg('导入的文件格式不正确!')
    		return
    	}
    	if(obj.size/1024 > IMPORTFILE_MAXSIZE){
    		layer.msg('导入的表格文件不能大于2M')
    		return
    	}
    	
    	var f = obj;
    	var reader = new FileReader();
    	reader.onload = function(e) {
    		var data = e.target.result;
    		if(rABS) {
    			wb = XLSX.read(btoa(fixdata(data)), {     //手动转化
    				type: 'base64'
    			});
    		} else {
    			wb = XLSX.read(data, {
    				type: 'binary'
    			});
    		}
    		var strForm=XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
    		
    		$scope.rows = [];
    		var excelData = [], tStr = trStr='';
    		for(var i=0; i<strForm.length; i++){
    			var row = {},strFormTr = {};
    			$.each(strForm[i], function(si, sv){
    				strFormTr[si.replace("*", "")] = sv;
    			});
    			// 将NAME-val格式转换成val-name格式
    			$.each(nameValMap, function(key,val){
    				tStr = strFormTr[key.replace("*", "")] ? strFormTr[key.replace("*", "")] : '';
    				row[val] = tStr;
    			});
    			$scope.rows.push(row);
    		}
    	};
    	if(rABS) {
    		reader.readAsArrayBuffer(f);
    	} else {
    		reader.readAsBinaryString(f);
    		console.log('readAsBinaryString');
    	}
    }
    
    $scope.doExportTemplate = function() {

		$http.post('/api/inter/common/generateImportTemplate', {}, {params: {menuId: $scope.menuId}})
		.success(function (res) {
			if(res.code == 0) {
				const xhr = new XMLHttpRequest();
				xhr.open('GET', res.data.url);
				xhr.responseType = 'blob';
				xhr.onload = function() {
					const blob = xhr.response;
					const link = document.createElement('a');
					link.href = URL.createObjectURL(blob);
					link.download = $scope.fileName;
					link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
					link.click();
				};
				xhr.send();
			}
		});
    }
    
    $scope.doImport = function() {
    	$scope.oneImportNum = 2;
    	$scope.currentPage = 0;
    	$scope.totalPage = 1;
    	
		setTimeout(function(){
			if($scope.rows.length > 9 && $scope.rows.length <= 100){
				$scope.oneImportNum = 5;
			}else if($scope.rows.length > 100 && $scope.rows.length <= 500){
				$scope.oneImportNum = 30;
			}else if($scope.rows.length > 500 && $scope.rows.length <= 1000){
				$scope.oneImportNum = 50;
			}else if($scope.rows.length > 1000){
				$scope.oneImportNum = 100;
			}

			$scope.totalPage = Math.ceil($scope.rows.length/$scope.oneImportNum);
			$scope.eachImport(0);
			return false;
		}, 1000);
    }
    
    $scope.eachImport = function(startIndex) {

        var importObj = [];
	    for (var i = startIndex; i < startIndex + $scope.oneImportNum; i++) {
	        if (i >= $scope.rows.length) break;
	        importObj.push($scope.rows[i]);
	    }
	    
		$http.post('/api/inter/common/importBatch', {}, {params: {menuId: $scope.menuId, rows: JSON.stringify(importObj)}})
		.success(function (res) {
			$scope.currentPage = $scope.currentPage + 1;
	        
		    setTimeout(function () {
		        if ($scope.currentPage <= $scope.totalPage) {
		        	$scope.eachImport(startIndex + $scope.oneImportNum);
		        }
		    }, 500);
		});
    }
}
</script>
</body>
</html>
